<template>
  <div>
    <el-dialog
      title="结账信息"
      :visible.sync="dialogTableVisible"
      :closed="close1"
    >
      <div class="jiezhangBox">
        <div class="jiezhangLeft">
          <div class="msg">
            <p>
              收银员 <span>{{ userData.id }}</span> 日期<span>{{
                date
              }}</span>
              流水号<span>{{serial_number}}</span>
            </p>
          </div>
          <hr />
          <el-table :data="gridData" style="width: 500px" max-height="300px">
            <el-table-column
              type="index"
              label="序号"
              width="90"
            ></el-table-column>
            <el-table-column
              property="goods_name"
              label="商品名称"
              width="130"
            ></el-table-column>
            <el-table-column
              property="persent_price"
              width="80"
              label="单价"
            ></el-table-column>
            <el-table-column
              property="num"
              label="数量"
              width="100"
            ></el-table-column>
            <el-table-column
              property="amount"
              label="金额"
              width="80"
            ></el-table-column>
          </el-table>

          <div class="dashed">
            <div></div>
            <div class="gongji">
              共计：<span>{{ totalMoney }}</span>
            </div>
          </div>
          <div class="jiezhangBot" v-for="(v, i) in discount" :key="i">
            <div>*部分商品参与{{ v.comment }}活动</div>
            <div>
              优惠<span>{{ v.price }}</span>
            </div>
          </div>
        </div>
        <div class="jiezhangRight">
          <div>
            实收：<el-input
              v-model="incomMoney"
              type="number"
              class="shishou"
              placeholder=""
              @blur="incom"
            ></el-input>
          </div>
          <div>
            找零：
            <span style="font-size: 20px">{{ retreat }}</span
            >元
          </div>
          <el-button
            type="primary"
            class="confirm"
            @click="shouyin"
            style="width: 150px; background-color: blueviolet"
            >确认</el-button
          >
        </div>
      </div>
      <el-dialog
        width="20%"
        title="打印票据"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-button
          type="primary"
          class="confirm"
          style="background-color: blueviolet"
          >打印票据</el-button
        >
        <el-button type="primary" @click="close">关闭</el-button>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["dialogTableVisible", "gridData", "totalMoney", "discount","date","tableData","serial_number"],
  data() {
    return {
      incomMoney: 0,
      retreat: 0,
      userData: {},
      gridTable: {
        pagesize: 5,
        total: 0,
        page: 1,
      },
      Serial_num: "202107220001",
      dialogVisible: false,
      innerVisible: false,

      formLabelWidth: "120px",
    };
  },
  methods: {
    close() {
      this.$emit("closezd");
      this.innerVisible = false;
    },
    close1() {
      this.$emit("closezd");
    },
    incom() {
      this.retreat = this.incomMoney - this.totalMoney;
    },
    shouyin() {
     this.$emit("changeGrid");
     for (var m = 0; m < this.gridData.length; m++) {
        if (this.gridData[m].discount_name == "赠品") {
          this.gridData[m].amount = "0";
        }
      }
      this.$axios({
        url: "/counter/check_out",
        method: "post",
        data: {
          serial_number:this.Serial_num,
          sall_date:this.date,
          user_id:this.userData.id.toString(),
          data:this.gridData,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.innerVisible = true;
        console.log(res,"2");
       this.$emit("close");
       console.log("1");
        }
        
      });
    },
  },
  watch: {
    dialogTableVisible: function () {
      if (this.dialogTableVisible == false) {
        this.$emit("closezd");
      }
      return this.dialogTableVisible;
    },
    discount: function () {
      return this.discount;
    },
  },
  mounted() {
    this.userData = this.$store.state.user;
    console.log(this.userData);
    
  },
};
</script>

<style lang="less" scoped>
.jiezhangBox {
  display: flex;
}
.jiezhangRight {
  width: 300px;
}
.jiezhangLeft {
  width: 500px;
  padding-left: 20px;
}
.dashed {
  width: 500px;
  height: 50px;
  padding-top: 15px;
  font-size: 18px;
  border-bottom: #121313 1px dashed;
}
.gongji {
  display: inline;
  float: right;
}
.jiezhangBot {
  display: flex;
  justify-content: space-between;
}
.jiezhangRight {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  padding-left: 30px;
}
.shishou {
  width: 100px;
}
.jiezhangRight div,
.jiezhangRight span {
  margin-top: 20px;
  margin-left: 20px;
}
.confirm {
  margin-top: 80px;
  margin-left: 30px;
}
.fengye el-pagination {
  margin-left: 100px;
}
.msg span {
  margin-right: 30px;
  margin-left: 10px;
}
</style>